<template>
  <div class="main_body">
    <header>
      <a @click="$api.goBack()" class="back"></a>
      <span v-if="type">编辑课程</span>
      <span v-if="!type">添加课程</span>
      <a class="add" v-if="detail.lessonId&&canAdd||canEdit" @click="back()">保存</a>
    </header>
    <div class="select_class" style="height:auto;">
      <div class="main" @click="changePhoto()">
        <div class="flex">
          <div>课程图片</div>
        </div>
        <div @click.stop="$api.showImgDetail(detail.lessonPhoto)">
          <img class="image_wrap" :src="detail.lessonPhoto" />
        </div>
      </div>
      <div class="main">
        <div class="flex">
          <div>课程名称</div>
          <div class="red">*</div>
        </div>
        <div>
          <input :readonly="!canEdit" v-model="detail.lessonName" @change="changeValue" />
        </div>
      </div>
      <div class="main" @click="selectTeacher">
        <div class="flex">
          <div>授课教师</div>
        </div>
        <div>
          <div class="more" ></div>
        </div>
      </div>
      <div class="textarea_wrap main">
        <textarea :readonly="!canEdit" placeholder="课程简介" v-model="detail.content" rows="4"></textarea>
      </div>
      <div class="row" v-if="detail.lessonId&&useInfo.tsMenuList[4].voOperate.removeObj" @click="deleteLesson" style="padding:0 0.37333rem">
        <mt-button style="width:100%;" type="danger">删除</mt-button>
      </div>
    </div>
    <input type="file" id="uploads" style="display:none;" accept="image/png, image/jpeg, image/gif, image/jpg" @change="uploadImg($event, 2)">
    <mt-actionsheet :actions="actions" v-model="sheetVisible">
    </mt-actionsheet>
  </div>
</template>

<script>
    import {
        MessageBox
    } from 'mint-ui';
    export default {
        data() {
            return {
                example2: {
                    img: 'http://ofyaji162.bkt.clouddn.com/bg1.jpg',
                    info: true,
                    size: 1,
                    outputType: 'jpeg',
                    canScale: false,
                    autoCrop: true,
                    // 只有自动截图开启 宽度高度才生效
                    autoCropWidth: 300,
                    autoCropHeight: 250,
                    // 开启宽度和高度比例
                    fixed: true,
                    fixedNumber: [4, 3]
                },
                type: false, //判断新增或者编辑
                actions: [{
                    name: '拍照',
                    method: this.paizhao
                }, {
                    name: '从相册中选择',
                    method: this.selectImg
                }],
                content: '',
                sheetVisible: false,
                useInfo: '',
                detail: {
                    lessonPhoto: null,
                    lessonName: '',
                    content: '',

                },
            }
        },
        methods: {
            paizhao() {
                this.$api.getImage((p, url) => {
                    this.example2.img = url
                    sessionStorage.setItem('exampleImg', JSON.stringify(this.example2.img));
                    this.$router.push({
                        'path': '/cropper'
                    })
                })
                console.log('拍照');
            },
            selectImg() {
                document.getElementById("uploads").click();
            },
            deleteLesson() {
                var url = "/lesson/remove";
                var params = {
                    lessonId: this.detail.lessonId
                };
                MessageBox.confirm('确定要删除课程?').then(action => {
                    this.$api.post(url, params, (data) => {
                        MessageBox('提示', '删除成功');
                        this.$api.goBack();
                    })
                }).catch(e => {

                });

            },
            selectTeacher() {
                var teacherOption = {
                    title: 'selectTeacher',
                    multiple: true, //是否多选
                    noEdit: !this.canEdit, //是否禁用编辑编辑
                    teacherIds: this.detail.teacherIds,
                }
                sessionStorage.setItem('teacherOption', JSON.stringify(teacherOption))
                this.$router.push({
                    path: 'selectTeacher',
                });
            },
            uploadImg(e, num) { //从相册选取文件
                var file = e.target.files[0]
                if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
                    alert('图片类型必须是.gif,jpeg,jpg,png,bmp中的一种')
                    return false
                }
                var reader = new FileReader()
                reader.onload = (e) => {
                    let data
                    if (typeof e.target.result === 'object') {
                        data = window.URL.createObjectURL(new Blob([e.target.result]))
                    } else {
                        data = e.target.result
                    }
                    if (num === 1) {
                        this.option.img = data
                    } else if (num === 2) {
                        this.example2.img = data
                        sessionStorage.setItem('exampleImg', JSON.stringify(this.example2.img));
                        this.$router.push({
                            'path': '/cropper'
                        })
                    }
                }
                reader.readAsArrayBuffer(file)
            },
            getRadioBack() { //获取选择的老师
                var teacher = JSON.parse(sessionStorage.getItem('radioBackOptions'));
                if (!teacher) return;
                console.log(JSON.parse(JSON.stringify(teacher)));
                var teacherIds = '';
                teacher.forEach(element => {
                    teacherIds = teacherIds + element.item.teacherId + ','
                });
                console.log(teacherIds);
                this.detail.teacherIds = teacherIds;
                sessionStorage.removeItem('radioBackOptions');
                this.changeValue();
                // sessionStorage.removeItem('radioBackOptions');
            },
            changeValue() {
                sessionStorage.setItem('lessonDetail', JSON.stringify(this.detail));
            },
            changePhoto() {
                if (!this.canEdit) return;
                this.sheetVisible = true;
            },
            getUseInfo() {
                this.useInfo = JSON.parse(sessionStorage.getItem('useInfo'));
                this.canEdit = this.useInfo.tsMenuList[4].voOperate.editObj;
                this.canAdd = this.useInfo.tsMenuList[4].voOperate.addObj;
            },
            back() {
                var params = JSON.parse(JSON.stringify(this.detail));
                for (var i in params) {
                    if (!this.$check.empty(params[i])) {
                        switch (i) {
                            case 'lessonName':
                                MessageBox('提示', '课程名称不能为空');
                                return;
                                break;

                        }
                    }
                }
                var url = '/lesson/save'
                this.$api.post(url, params, (data) => {
                    MessageBox('提示', '操作成功');
                    //this.useInfo.userPhoto = data.info
                    this.$api.goBack();
                })
            },
            getDetail() {
                var detail = JSON.parse(sessionStorage.getItem('lessonDetail'));
                console.log(JSON.parse(sessionStorage.getItem('lessonDetail')));
                if (detail) { //编辑
                    this.detail = detail;
                    this.type = true
                } else { //新增
                    this.type = false
                }
                this.detail.schoolId = this.useInfo.schoolId;
                var filepath = JSON.parse(sessionStorage.getItem('imgOption'));
                if (filepath) {
                    this.detail.lessonPhoto = filepath.filePath;
                    this.detail.baseFileId = filepath.baseFileId;
                }
                this.getRadioBack();
            }
        },
        created() {
            this.getUseInfo();
            this.getDetail();

        },

    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .main_body {
        background: white;
        height: 100%;
    }
</style>